<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华为专区</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
</head>

<body>
    <!-- 1.快捷导航 -->
    <div class="shotcut">
        <div class="wrapper">
            <div class="shotcutLeft">
                <ul class="leftUl">
                    <li><a href="#">华为官网</a> </li>
                    <li><a href="#">荣耀官网</a> </li>
                    <li><a href="#">软件应用<span class="iconfont icon-xiangxiajiantou"></span> </a> </li>
                    <li><a href="#">花粉俱乐部</a> </li>
                    <li><a href="#">Select Region</a> </li>
                </ul>
                <ul class="rightUl">
                    <li><a href="#">登录</a> <a href="#">注册</a></li>
                    <li><a href="#">我的订单</a> </li>
                    <li><a href="#">V码(优购码)</a> </li>
                    <li><a href="#">花粉俱手机版乐部</a> </li>
                    <li><a href="#">手机版<span class="iconfont icon-xiangxiajiantou"></span></a> </li>
                </ul>
            </div>
        </div>

    </div>
    <!-- 2.logo -->
    <div class="logo wrapper">
        <div class="logoLeft">
            <img src="./images/logo.huawei.png" alt="">
            <div class="shop">商城首页</div>
        </div>
        <div class="logoright">

        </div>
    </div>
    <!-- 3.红色条状导航 -->
    <div class="phoneClassify">
        <div class="wrapper navTop">
            <div class="allgood">全部商品</div>
            <ul class="phonetitle">
                <li>华为专区</li>
                <li>HUAWEI P10</li>
                <li>HUAWEI Mate9</li>
                <li>HUAWEINova</li>
                <li>华为畅享6S</li>
                <li>荣耀专区</li>
            </ul>
        </div>
    </div>
    <!-- 4.轮播图 -->
    <div class="nav">
        <div class="wrapper">
            <!-- 左侧列表导航区域 -->
            <div class="subnav">
                <ul>
                    <li>
                        <div class="classifyTitle">手机</div>
                        <p class="classifyContent">HUAWEI Mate系列</p>
                    </li>
                    <li>
                        <div class="classifyTitle">平板 & 穿戴</div>
                        <p class="classifyContent">平板电脑 手环/手表</p>
                    </li>
                    <li>
                        <div class="classifyTitle">笔记本电脑</div>
                        <p class="classifyContent"></p>
                    </li>
                    <li>
                        <div class="classifyTitle">智能家居</div>
                        <p class="classifyContent">子母路由 电力猫 路由器</p>
                    </li>
                    <li>
                        <div class="classifyTitle">专属配件</div>
                        <p class="classifyContent">贴膜 保护壳 保护套</p>
                    </li>
                    <li>
                        <div class="classifyTitle">通用配件</div>
                        <p class="classifyContent">耳机 音箱</p>
                    </li>
                </ul>
            </div>
            <!-- 圆点指示器 -->
            <ol>
                <li class="current"><i>1</i></li>

                <li><i>2</i></li>

                <li><i>3</i></li>
                <li><i>4</i></li>
                <li><i>5</i></li>
                <li><i>6</i></li>
                <li><i>7</i></li>

            </ol>
        </div>

    </div>
    <!-- 5手机卖品 -->
    <div class="MobilePhone wrapper">
        <img src="./images/p1.jpg" alt="">
        <img src="./images/p2.jpg" alt="">
        <img src="./images/p3.jpg" alt="">
        <img src="./images/p4.jpg" alt="">
    </div>
    <!-- 6.华为手机展览 -->
    <div class="display wrapper">
        <div class="displayItem">
            <div class="displayLeft">
                <div class="phoneName">HUAWEI P10 Plus</div>
                <div class="phoneDes">金属钻雕工艺</div>
                <div class="phonePrice">¥4388</div>
            </div>
            <img src="./images/phone1.png" alt="">
        </div>
        <div class="displayItem">
            <div class="displayLeft">
                <div class="phoneName">HUAWEI nova 青春版</div>
                <div class="phoneDes">炫出我色彩</div>
                <div class="phonePrice">¥1999</div>
            </div>
            <img src="./images/phone2.png" alt="">
        </div>
        <div class="displayItem">
            <div class="displayLeft">
                <div class="phoneName">HUAWEI Mate 9 Pro</div>
                <div class="phoneDes">2K双曲面屏</div>
                <div class="phonePrice">¥4699</div>
            </div>
            <img src="./images/phone3.png" alt="">
        </div>

    </div>

    <!-- 12.底部版权 -->
    <div class="footer">
        <div class="wrapper">
            <!-- 服务 -->
            <div class="service">
                <ul>
                    <li>
                        <h5></h5>
                        <p>500强企业 品质保证</p>

                    </li>




                    <li>
                        <h5></h5>

                        <p>7天退货 15天换货</p>

                    </li>

                    <li>
                        <h5></h5>

                        <p>99元起免运费</p>

                    </li>

                    <li>
                        <h5></h5>

                        <p>448家维修网点 全国联保</p>

                    </li>

                </ul>

            </div>

            <!-- 帮助中心 -->
            <div class="help">
                <dl>
                    <dt><span></span>帮助中心</dt>
                    <dd><a href="#">购物指南</a></dd>
                    <dd><a href="#">配送方式</a></dd>
                    <dd><a href="#">支付方式</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                </dl>

                <dl>
                    <dt><span></span>售后服务</dt>
                    <dd><a href="#">售后服务</a></dd>
                    <dd><a href="#">保修政策</a></dd>
                    <dd><a href="#">退换货政策</a></dd>
                    <dd><a href="#">保修状态查询</a></dd>
                </dl>
                <dl>
                    <dt><span></span>技术支持</dt>
                    <dd><a href="#">售后网点</a></dd>
                    <dd><a href="#">荣耀零售店铺</a></dd>
                    <dd><a href="#">预约维修</a></dd>
                    <dd><a href="#">手机寄修服务</a></dd>
                    <dd><a href="#">维修配件价格查询</a></dd>
                    <dd><a href="#">软件下载</a></dd>
                </dl>
                <dl>
                    <dt><span></span>关于商城</dt>
                    <dd><a href="#">公司介绍</a></dd>
                    <dd><a href="#">华为商城简介</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt><span></span>关注我们</dt>
                    <dd><a href="#">新浪微博</a></dd>
                    <dd><a href="#">腾讯微博</a></dd>
                    <dd><a href="#">花粉俱乐部</a></dd>
                    <dd><a href="#">商城手机版</a></dd>
                </dl>
            </div>

            <!-- 版权 -->
            <div class="copyright">
                <p>友情链接： | 华为官网 | 华为消费者业务 | 荣耀官网 | 花粉俱乐部 | 莫塞尔商城 | 爱旅官网 | 华为应用市场 | 万表网 | 中商情报网 | 刷机精灵 | 华为手机 | 优购物官网 |
                    智能电视 | UC浏览器 |</p>
                <p>中关村商城 | 酷狗音乐 | 华为商城手机版 | 百信手机网 | 卡宝宝网 | 多特软件下载 | 同步助手 | 蜂鸟摄影网 | 奇珀论坛 | 家具商城 | 拍鞋网商城 | 欧宝丽珠宝 | 寻购网 |
                    亿智蘑菇 | 安卓市场 | </p>
                <p>阿里巴巴生意经 | 手机大全 | 安卓软件园 | 卓大师刷机 | 智机论坛 | 电子产品世界 | 历趣网 | 网购返利 | Apple110 | 91手机门户网 | 移动叔叔 | 奥特莱斯 |
                    荣耀Magic | 携程租车 | <span class="red">申请链接 >></span></p>
                <p>隐私政策 服务协议 Copyright ? 2012-2017 VMALL.COM 版权所有 保留一切权利</p>
                <p><span class="plice"></span>公安备案 苏公网安备 32011402010009号 | 苏ICP备09062682号-9 | 增值电信业务经营许可证：苏B2-20130048 |
                    网络文化经营许可证：苏网文[2015] 1599-026号 </p>
                <p>
                    <img src="./images/f1.jpg" alt="" class="CopyRight">
                    <img src="./images/f2.png" alt="" class="CopyRight">
                    <img src="./images/f3.png" alt="" class="CopyRight">
                    <img src="./images/f4.png" alt="" class="CopyRight">
                </p>
                <!-- <p>CopyRight © 小兔鲜</p> -->

            </div>

        </div>

    </div>

</body>

</html>